<template>
  <view>
    <view class="list">
      <view class="list-item" v-for="(v, i) in list" :key="i" @click="toDetail(v)">
        <image :src="v.image" mode=""></image>
        <view class="right">
          <text>{{v.title}}</text>
          <text>{{v.desc}}</text>
          <text>￥：{{v.price}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mixin from '../../mixins/index.js'
  export default {
    mixins: [mixin],
    onLoad() {
      this.getList()
    },
    data() {
      return {
        list: []
      };
    },
    methods: {
      getList() {
        uni.request({
          url: 'http://localhost:3000/list',
        }).then(resp => {
          this.list = resp.data;
        })
      },
      toDetail(v) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + v.id
        })
      }
    }
  }
</script>

<style lang="scss">
  .list-item {
    display: flex;

    image {
      width: 180px;
      height: 120px;
      flex-shrink: 0;
    }

    .right {
      margin-left: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
</style>
